<!DOCTYPE html>
<html lang="en">
<head>
    <title>主页</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/jquery.min.js"></script>


    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>



</head>
<body>

<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <div class="market-updates">
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-2">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-eye"> </i>
                        </div>
                        <div class="col-md-8 market-update-left" id="insurance">
                            <h3>保险</h3>
                            <h4>信息</h4>
                            <p>Other hand, we denounce</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-1">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-users" ></i>
                        </div>
                        <div class="col-md-8 market-update-left" id="user">
                            <h3>客户</h3>
                            <h4>信息</h4>
                            <p>Other hand, we denounce</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-3">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-usd"></i>
                        </div>
                        <div class="col-md-8 market-update-left" id="emp">
                            <h3>员工</h3>
                            <h4>信息</h4>
                            <p>Other hand, we denounce</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="col-md-3 market-update-gd">
                    <div class="market-update-block clr-block-4">
                        <div class="col-md-4 market-update-right">
                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                        </div>
                        <div class="col-md-8 market-update-left" id="order">
                            <h3>订单</h3>
                            <h4>信息</h4>
                            <p>Other hand, we denounce</p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>

            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            信康车险系统
                        </header>
                        <div class="panel-body">
                        <#include "welcome.ftl"/>
                        </div>
                    </section>
                </div>



        </section>
         <#include "foot.ftl"><#--引入底部-->
    </section>
    <!--main content end-->
</section>
<script>
    $(document).ready(function() {
        //BOX BUTTON SHOW AND CLOSE
        jQuery('.small-graph-box').hover(function() {
            jQuery(this).find('.box-button').fadeIn('fast');
        }, function() {
            jQuery(this).find('.box-button').fadeOut('fast');
        });
        jQuery('.small-graph-box .box-close').click(function() {
            jQuery(this).closest('.small-graph-box').fadeOut(200);
            return false;
        });

        //CHARTS
        function gd(year, day, month) {
            return new Date(year, month - 1, day).getTime();
        }

        graphArea2 = Morris.Area({
            element: 'hero-area',
            padding: 10,
            behaveLikeLine: true,
            gridEnabled: false,
            gridLineColor: '#dddddd',
            axes: true,
            resize: true,
            smooth:true,
            pointSize: 0,
            lineWidth: 0,
            fillOpacity:0.85,
            data: [
                {period: '2015 Q1', iphone: 2668, ipad: null, itouch: 2649},
                {period: '2015 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
                {period: '2015 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
                {period: '2015 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
                {period: '2016 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
                {period: '2016 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
                {period: '2016 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
                {period: '2016 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
                {period: '2017 Q1', iphone: 10697, ipad: 4470, itouch: 2038},

            ],
            lineColors:['#eb6f6f','#926383','#eb6f6f'],
            xkey: 'period',
            redraw: true,
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });


    });
</script>
<script type="text/javascript" src="/js/monthly.js"></script>
<script type="text/javascript">
    $(window).load( function() {

        $('#mycalendar').monthly({
            mode: 'event',

        });

        $('#mycalendar2').monthly({
            mode: 'picker',
            target: '#mytarget',
            setWidth: '250px',
            startHidden: true,
            showTrigger: '#mytarget',
            stylePast: true,
            disablePast: true
        });

        switch(window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
        }

    });


    /*//增加webSocket
    var webSocket=new WebSocket("ws://localhost:8080/websocket");

    if("webSocket" in window){
        console.log("客户端支持webSocket");
    }

    webSocket.onopen=function (event) {
        console.log("打开连接");
    };

    webSocket.onclose=function (ev) {
        console.log("断开连接")
    };

    //接受客户端信息
    webSocket.onmessage=function (ev) {
        console.log(ev.data);
        if(ev.data=="101"){
            alert("有用户登录你的账号,你已被迫下线,请及时修改密码!");
            window.location.href="/login.html";
        }
    };

    //发送心跳,保证连接
    window.setInterval(function () {
        webSocket.send("11");

    },50000);*/

    $("#order").click(function () {
        layer.open(window.location="/order/toOrderQuery");
    });
    $("#user").click(function () {
        layer.open(window.location="/user/toList");
    });
    $("#insurance").click(function () {
        layer.open(window.location="/insurcate/toInsurcateList");
    });
    $("#emp").click(function () {
        layer.open(window.location="/emp/toGetEmpTable");
    });




</script>

</body>
</html>
